import React from "react";
export default class Weather extends React.Component{
    constructor(props){
        super(props)
        this.state={
            isHot:true,
            wind:"微风"
        }
        this.chanceWeather=this.chanceWeather.bind(this);
    }
    render(){
        const {isHot,wind}=this.state;
        return <h1 onClick={this.chanceWeather}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>;
    }
    chanceWeather(){
        //基础 this丢失问题
        //1.chanceWeather放在哪里？--放在Weather原型对象上，给实例对象调用
        //2.由于chanceWeather是作为onClick的回调，所以不是通过实例回调的，是直接调用
        //3.类中的方法默认开启严格模式，所以this指向undefined
        console.log(this);
        //状态必须通过setState api 修改
        const isHot=this.state.isHot;
        this.setState({isHot:!isHot});

    }
}

//state 简写
/**
 * export default class Weather extends React.Component{
    state = {isHot:true,wind:"微风"}
    render(){
        const {isHot,wind}=this.state;
        return <h1 onClick={this.chanceWeather}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>;
    }
    //要用赋值语句加上箭头函数
    chanceWeather = () => {
        const isHot=this.state.isHot;
        this.setState({isHot:!isHot});

    }
}

 */